<template>
  <el-dialog :title="titleList[flag]" :visible.sync="dialogVisible" width="50%" append-to-body>
    <el-form ref="form" :model="form" :disabled="flag==1" v-loading="loading">
      <el-row :gutter="10">
        <el-col :span="12">
          <el-form-item label="入库单号" prop="inventoryOrderNo" required>
            <div v-if="flag==1">{{form.inventoryOrderNo}}</div>
            <el-input v-else v-model="form.inventoryOrderNo" placeholder="自动生成" disabled/>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="入库类型" prop="optType" required>
            <dict-tag v-if="flag==1" :options="dict.type.wms_receipt_type" :value="form.optType"/>
            <el-select v-else v-model="form.optType" style="width: 100%">
              <el-option
                v-for="item in dict.type.wms_receipt_type"
                :key="item.value"
                :label="item.label"
                :value="Number(item.value)">
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="10">
        <el-col :span="12">
          <el-form-item label="仓库名称" prop="warehouseId" required>
            <div v-if="flag==1">{{form.warehouseName}}</div>
            <el-select v-else v-model="form.warehouseId" clearable filterable style="width: 100%"
                       @change="changeStore">
              <el-option
                v-for="val in storeList"
                :key="val.id"
                :label="val.warehouseName"
                :value="val.id"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="仓位名称" prop="warehouseSpaceId" required>
            <div v-if="flag==1">{{form.warehouseSpaceName}}</div>
            <el-select v-else v-model="form.warehouseSpaceId" clearable filterable style="width: 100%">
              <el-option
                v-for="val in spaceList"
                :key="val.id"
                :label="val.spaceName"
                :value="val.id"
              />
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="10">
        <el-col :span="12">
          <el-form-item label="备注" prop="remark">
            <div v-if="flag==1">{{form.remark}}</div>
            <el-input v-else type="textarea" v-model="form.remark" placeholder="请输入"/>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <div class="myTitle">商品信息</div>
    <div v-if="flag==0">
      <el-button type="primary" plain @click="list.push({})">新增</el-button>
      <el-button plain @click="list=[]">清空</el-button>
    </div>
    <el-table :data="list" max-height="500" v-loading="loading">
      <el-table-column type="index" label="序号" align="center"></el-table-column>
      <el-table-column prop="productId" label="商品名称" align="center">
        <template slot-scope="scope">
          <div v-if="flag">{{scope.row.productName}}</div>
          <el-select  v-else v-model="scope.row.productId"  filterable style="width: 100%">
            <el-option
              v-for="item in goodList"
              :key="item.id"
              :label="item.productName"
              :value="item.id">
            </el-option>
          </el-select>
        </template>
      </el-table-column>
      <el-table-column prop="skuId" label="商品规格" align="center">
        <template slot-scope="scope">
          <div v-if="flag">{{scope.row.skuName}}</div>
          <el-select v-else  v-model="scope.row.skuId" filterable  style="width: 100%">
            <el-option
              v-for="item in skuList"
              :key="item.id"
              :label="item.skuName"
              :value="item.id">
            </el-option>
          </el-select>
        </template>
      </el-table-column>
      <el-table-column prop="quantity" label="数量" align="center">
        <template slot-scope="scope">
          <div v-if="flag">{{scope.row.quantity}}</div>
          <el-input v-else  type="number" v-model="scope.row.quantity" :min="0" placeholder="请输入"/>
        </template>
      </el-table-column>
    </el-table>
    <div slot="footer" class="dialog-footer">
      <el-button @click="dialogVisible=false">取 消</el-button>
      <el-button type="primary" @click="dialogOk" v-if="flag!=1">入库</el-button>
    </div>
  </el-dialog>
</template>

<script>
import {
  addInStore,
  listStore,
  listStoreSpace,
  updateInStore,
  okInStore, listGood, getCommonCode, listGoodSku
} from "../../../../api/imsMng";
export default {
  dicts: ['wms_receipt_type'],
  data() {
    return {
      flag: 0,
      loading: false,
      dialogVisible: false,
      form: {},
      titleList: ['新增', '详情', '修改'],
      storeList: [],
      spaceList: [],
      goodList:[],
      skuList:[],
      list: []
    }
  },
  watch: {
    'form.warehouseId'(e) {
      this.spaceList = []
      listStoreSpace({id: this.form.warehouseId}).then(res => {
        this.spaceList = res.rows
        if (this.flag == 0) {
          let list = this.spaceList.filter(val => val.isDefaultSpace == 0)
          this.$set(this.form, 'warehouseSpaceId', list[0].id)
        }
      })
    }
  },
  methods: {
    show(flag, form) {
      this.flag = flag
      this.dialogVisible = true
      this.goodList = []
      this.skuList = []
      this.list = []
      this.resetForm('form')
      this.form = form
      this.load()
      if(!flag){
        getCommonCode({orderType: 40}).then(res => {
          this.$set(this.form, 'inventoryOrderNo', res.data.orderNo)
        })
      }else{
        this.list=this.form.details
      }
    },
    changeStore(e) {
      if (e) {
        this.$set(this.form, 'warehouseSpaceId', '')
      }
      listStoreSpace({id: this.form.warehouseId}).then(res => {
        this.spaceList = res.rows
      })
    },
    load() {
      listStore().then(res => {
        this.storeList = res.rows
        if (this.flag == 0) {
          let list = this.storeList.filter(val => val.isDefault == 0)
          this.$set(this.form, 'warehouseId', list[0].id)
        }
      })
      listGood({ pageSize: -1}).then(res => {
        this.goodList = res.rows
      })
      // 非定制规格
      listGoodSku({pageSize:-1}).then(res => {
        this.skuList = res.rows
        this.skuList=this.skuList.filter(e=>e.skuSource!=2)
      })
    },
    deleteRow(row) {
      this.list = this.list.filter(val => val != row)
    },
    dialogSave() {
      this.$refs.form.validate(e => {
        if (e) {
          this.loading=true
          if(!this.list.length){
            this.$message.error('商品信息不能为空')
            return
          }
          this.form.details=this.list
          if (this.flag == 2) {
            updateInStore(this.form).then(res => {
              this.$emit('ok')
              this.dialogVisible = false
              this.$message.success('修改成功')
            }).finally(e=>{
              this.loading=false
            })
          } else {
            addInStore(this.form).then(res => {
              this.$emit('ok')
              this.dialogVisible = false
              this.$message.success('新增成功')
            }).finally(e=>{
              this.loading=false
            })
          }
        }
      })
    },
    dialogOk() {
      this.$refs.form.validate(e => {
        if (e) {
          if(!this.list.length){
            this.$message.error('商品信息不能为空')
            return
          }
          this.loading=true
          this.form.details=this.list
          okInStore(this.form).then(res => {
            this.$emit('ok')
            this.dialogVisible = false
            this.$message.success('入库成功')
          }).finally(e=>{
            this.loading=false
          })
        }
      })
    },
  }
}
</script>
